<template>
  <z-modal
    v-bind="modalOption"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
        <a-row>
          <a-col :span="8" >
            <a-form-model-item label="模型编码" prop="modelCode">
              <a-input placeholder="请输入编码" :disabled="editType !== 'add' || disableSubmit" v-model.trim="form.modelCode"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="模型名称" prop="modelName">
              <a-input placeholder="请输入名称" :disabled="disableSubmit" v-model.trim="form.modelName"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="数据库表名" prop="tableName">
              <a-input placeholder="请输入数据库表名" :disabled="disableSubmit" v-model.trim="form.tableName"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="模型类型" prop="modelType">
               <z-dict-select-tag v-model="form.modelType" :disabled="disableSubmit" dictCode="MB_GEN_MODEL_TYPE"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="包名" >
              <a-input placeholder="请输入包名" :disabled="disableSubmit" v-model.trim="form.rootPackage"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="访问路径">
              <a-input placeholder="请输入访问路径" :disabled="disableSubmit" v-model.trim="form.modelPath"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="模型描述">
              <a-textarea placeholder="请输入模型描述" :disabled="disableSubmit" v-model.trim="form.modelDesc"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <a-tabs v-model="activeKey">
        <a-tab-pane tab="字段信息" :key="refKeys[0]" forceRender>
          <vxe-grid
            :ref="refKeys[0]"
            :columns="detailTable.column"
            :data="detailTable.dataSource"
            :edit-rules="detailTable.validRules"
            :edit-config="{enabled:true,trigger: 'click', mode: 'row', showStatus: true, autoClear: false}"
            v-bind="vxeTableOption"
          >
          </vxe-grid>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </z-modal>
</template>

<script>
import ZDictSelectTag from '@/components/dict/ZDictSelectTag'
import ModalFormMixin from '@/mixins/ModalFormMixin'
import { duplicateCheck } from '@/services/common'
import debounce from 'lodash/debounce'
import { CURY_TYPE } from '@/store/mutation-types'
export default {
  name: 'GenModal',
  components: { ZDictSelectTag },
  mixins: [ModalFormMixin],
  data() {
    return {
      url: {
        add: '/sys/generator/model/add',
        edit: '/sys/generator/model/edit',
        list: '/sys/generator/prop/list/'
      },
      validatorRules: {
        modelCode: [
          { required: true, message: '请输入模型编码' },
          { validator: (rule, value, callback) => this.validateCode(rule, value, callback), trigger: 'blur' }
        ],
        modelName: [
          { required: true, message: '请输入模型名称' }
        ],
        tableName: [
          { required: true, message: '请输入数据库表名' }
        ],
        modelType: [
          { required: true, message: '请选择模型类型' }
        ]
      },
      detailTable: {
        column: [
          { type: 'checkbox', width: 40 },
          { type: 'seq', width: 40 },
          { title: '属性名称', field: 'propertyName', width: 120, editRender: { name: 'AInput' }},
          { title: '字段名称', field: 'columnName', editRender: { name: 'AInput' }, width: 120 },
          { title: '字段类型', field: 'columnType', editRender: { name: 'ZDictSelectTag', props: { dictCode: 'MB_GEN_COLUMN_TYPE' }}, width: 140 },
          { title: '字段长度', field: 'columnLength', width: 100, editRender: { name: 'AInput', props: { type: 'number' }}},
          { title: '字段精度', field: 'columnPrecision', width: 100, editRender: { name: 'AInput', props: { type: 'number' }}},
          { title: '小数位数', field: 'columnScale', width: 100, editRender: { name: 'AInput', props: { type: 'number' }}},
          { title: '是否主键', field: 'key', editRender: { name: 'ASwitch' }, width: 120 },
          { title: '是否唯一', field: 'unique', editRender: { name: 'ASwitch' }, width: 120 },
          { title: '是否可空', field: 'nullable', editRender: { name: 'ASwitch' }, width: 120 },
          { title: '展示类型', field: 'showType', editRender: { name: 'ZDictSelectTag', props: { dictCode: 'MB_GEN_SHOW_TYPE' }}, width: 140 },
          { title: '格式化', field: 'showFormat', editRender: { name: 'AInput' }, width: 150 },
          { title: '字典编码', field: 'dictCode', editRender: { name: 'AInput' }, width: 120 },
          { title: '备注', field: 'memo', editRender: { name: 'AInput' }, width: 100 }
        ],
        dataSource: [],
        validRules: {
          propertyName: [{ required: true, message: '请输入属性名称', trigger: 'change' }],
          columnName: [{ required: true, message: '请输入字段名称', trigger: 'change' }],
          columnType: [{ required: true, message: '请输入字段类型', trigger: 'change' }]
        }
      },
      refKeys: ['detailTable'],
      activeKey: 'detailTable'
    }
  },
  methods: {
    editAfter() {
      this.confirmLoading = true
      this.requestSubTableData(this.url.list + this.model.id, {}, this.detailTable, (res) => {
        this.confirmLoading = false
        this.createdVxeTableData('detailTable', this.detailTable.dataSource)
      })
    },
    getInsertData() { // table插入前调用
      return {
        modelId: this.form.id,
        columnType: 'String'
      }
    },
    validateCode: debounce(function(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        duplicateCheck({
          tableName: 'mb_generate_model',
          column: 'model_code_',
          key: value,
          exclude: this.editType === 'edit' ? value : undefined
        }).then(res => {
          if (res.success) {
            res.result === 0 ? callback() : callback('编码已存在')
          } else {
            this.$message.warning(res.message)
          }
        })
      }
    }, 400),
    classifyIntoFormData() {
      const data = this.$refs[this.refKeys[0]].getRecordset()
      const tableData = this.setDataCrud(data)
      this.form.crudType = this.editType === 'add' ? CURY_TYPE.SAVE : CURY_TYPE.UPDATE
      return {
        ...this.form,
        genProperties: [...tableData]
      }
    }
  }
}
</script>
